<!-- Restaurant Control Program >> Restaurant Manager  --> 


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Employee Creation</title>
		<link href="resources/CSS/Featured.css" rel="stylesheet" type="text/css"/>
	</head>
	
	<script language="JavaScript">
		
		
		function validate(form){
			if(form.firstname.value == ""){
				alert("Please fill in employee's first name");
				form.firstname.focus();
			}
			else if(form.lastname.value == ""){
				alert("Please fill in employee's last name");
				form.lastname.focus();
			}
			else if(form.password.value == ""){
				alert("Please fill in employee's password");
				form.password.focus();
			}
			else if(form.status.value == ""){
				alert("Please select employee's position");
				form.status.focus();
			}
			else{
				form.submit();
			}	
		}
		
		
		function toggle_visibility(id) {
		       var e = document.getElementById(id);
		       if(e.style.display == 'block')
		          e.style.display = 'none';
		       else
		          e.style.display = 'block';
		}
	</script>
	
	
	<body>
		
		<div class="center">
			<form name="input" action="CreateEmployee" method="post">
			<h1>+ New Employee</h1>
			
				First Name: 
				<div class="framedDiv">
					<table class="fieldTable">
						<tr>
							<td><input type="text" name="firstname"></td>
						</tr>
					</table>
				</div>
		
				Last Name: 			
				<div class="framedDiv">
					<table class="fieldTable">
						<tr>
							<td><input type="text" name="lastname"></td>
						</tr>
					</table>
				</div>
			
				Password: 
				<div class="framedDiv">
					<table class="fieldTable">
						<tr>
							<td><input type="text" name="password"></td>
						</tr>
					</table>
				</div>
		
				Position: 
				<div class="framedDiv">
					<table class="fieldTable">
						<tr>
							<td>
								<select name="status">
									<option value=""></option>
									<option value="0">Waiter</option>
									<option value="1">Host</option>
									<option value="2">Manager</option>		
								</select>
							</td>
						</tr>
					</table>
				</div>
				
				<br />
				
				
				<%--          Enter Schedule          --%>
				
				<button type='button' class='glass' onClick="toggle_visibility('visible')">Enter Schedule</button> 
				
				<br />
				
				<div class="framedDiv" id='visible' style='display:none'>
					
					<%-- Individually:
					<table class='schedule'>
						<tr>
							<td>
								<select name="day">
									<c:forEach items="${sessionScope.week}" var="current">
										<option value="${current.value}">${current.value}</option>	
									</c:forEach>
								</select>
							</td>
							
							<td>
								Clock In:
								<input type="text" class="time" name="inHour" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')"/>
								:
								<input type="text" class="time" name="inMinute" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')"/>
								
								<select name="inAMPM">
									<option value="am">AM</option>
									<option value="pm">PM</option>	
								</select>
							</td>
							
							<td>
								Clock Out:
								<input type="text" class="time" name="outHour" maxlength="2"  size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')"/>
								:
								<input type="text" class="time" name="outMinute" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')"/>
								
								<select name="outAMPM">
									<option value="am">AM</option>
									<option value="pm">PM</option>	
								</select>
							</td>
							
							<td>
								<button type='button'>Add</button>
							</td>
						
						</tr>
					
					</table>
					
					<br />  --%>
					
					<br />
					
					Work Week:
					<table class='schedule'>
						<c:forEach items="${sessionScope.week}" var="current">
							<tr>
								<td class='days'>
									${current.value}
								</td>
								
								<td>
									Clock In:
									<input type="text" class="time" name="clock_in_hr" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
									:
									<input type="text" class="time" name="clock_in_min" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
									
									<select name='in_time'>
										<option value=""></option>
										<option value="am">AM</option>
										<option value="pm">PM</option>	
									</select>
								</td>
								
								<td>
									Clock Out:
									<input type="text" class="time" name="clock_out_hr" maxlength="2"  size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
									:
									<input type="text" class="time" name="clock_out_min" maxlength="2" size="2" onkeyup="this.value=this.value.replace(/[^\d]/,'')" value=''/>
									
									<select name='out_time'>
										<option value=""></option>
										<option value="am">AM</option>
										<option value="pm">PM</option>	
									</select>
								</td>
							</tr>
						</c:forEach>
					</table>
					
				</div>
				
				<br />
				
				<%-- <input type="submit" value="Submit"> --%>
				<input type="button" value="Submit" onclick = "validate(this.form)"> 
				
			</form>
			
		</div>
		
	</body>
	
</html>